<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html;charset=UTF-8" language="java" %>
<c:if test="${empty sessionScope.user}">
    <c:redirect url="/login"/>
</c:if>
<c:if test="${sessionScope.role==2}">
    <script>
        alert("你没有权限访问该页面")
    </script>
</c:if>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型管理 - 新闻管理系统</title>
    <link rel="stylesheet" href="../../resources/css/admin-style.css">
</head>
<body class="admin-body">
<!-- 侧边栏 -->
<aside class="admin-sidebar">
    <div class="sidebar-header">
        <h2>新闻管理系统</h2>
    </div>
    <nav class="sidebar-nav">
        <a href="<c:url value="/dashboard"/>" class="nav-item">仪表盘</a>
        <a href="<c:url value="/list/news"/>" class="nav-item">新闻管理</a>
        <a href="<c:url value="/list/category"/>" class="nav-item active">类型管理</a>
        <c:if test="${sessionScope.role!=3}">
            <a href="<c:url value="/list/user"/>" class="nav-item">用户管理</a>
        </c:if>
        <a href="<c:url value="/list/comm"/>" class="nav-item">评论管理</a>
        <a href="<c:url value="/logout"/>" class="nav-item logout-item">退出登录</a>
    </nav>
</aside>

<!-- 主内容区 -->
<main class="admin-main">
    <header class="admin-header">
        <h1>新闻类型管理</h1>
        <button id="add-type-btn" class="add-btn" onclick="openEditTypeModal()">+ 添加分类</button>
    </header>

    <!-- 类型表格 -->
    <table class="type-table" id="type-list-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>分类名称</th>
            <th>新闻数量</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${categoryList}" var="category">
            <tr>
                <td>${categoryList.indexOf(category) + 1}</td>
                <td>${category.name}</td>
                <td>${category.news_num}</td>
                <td>${category.create_date}</td>
                <td>${category.alter_date}</td>
                <td>
                    <button class="edit-btn" onclick="openEditTypeModal(${category.id})">修改</button>
                    <button class="delete-btn" onclick="deleteCategory(${category.id})">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <!-- 添加/编辑类型模态框 -->
    <div id="type-modal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="type-modal-title">添加分类</h3>
                <span id="close-type-modal" class="close-btn" onclick="closeTypeModal()">&times;</span>
            </div>
            <div id="type-form">
                <input type="hidden" id="type-id">
                <div class="form-group">
                    <label for="type-name">分类名称 <span class="required">*</span></label>
                    <input type="text" name="name" id="type-name" required placeholder="如：国内、国际（不超过10个字符）"/>
                </div>
                <div class="modal-footer">
                    <input type="button" class="save-btn" value="保存" id="save-type-btn"/>
                    <button type="button" id="cancel-type-btn" class="cancel-btn" onclick="closeTypeModal()">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="../../resources/js/jquery-3.7.1.min.js"></script>
<script>
    function openEditTypeModal(id) {
        if (id == null) {
            // document.getElementById('type-modal-title').textContent = '添加分类';
            document.getElementById('type-form').reset();
            document.getElementById('type-id').value = '';
            document.getElementById('type-modal').classList.remove('hidden');

            document.getElementById('save-type-btn').onclick = function () {
                if (document.getElementById('type-name').value === '' || document.getElementById('type-name').value.length > 10) {
                    alert('分类名称不能为空或超过10个字符');
                    return;
                }
                $(document).ready(function () {
                    $.post('/list/add/category', {
                            name: document.getElementById('type-name').value
                        }
                    ).done(function (data) {
                        if(data===1) {
                            alert('添加成功');
                            location.reload();
                        }
                    }).fail(function () {
                        alert('添加失败！各个类型之间不允许重复！');
                        location.reload();
                    });
                });
                console.log('添加分类');
            }
            return;
        }
        $(document).ready(function () {
            $.get('/list/edit/category/' + id, function (data) {
                document.getElementById('type-modal-title').textContent = '编辑分类';
                document.getElementById('type-id').value = id;
                document.getElementById('type-name').value = data;
                document.getElementById('type-modal').classList.remove('hidden');
            });
        });
        document.getElementById('save-type-btn').onclick = function () {
            if (document.getElementById('type-name').value === '' || document.getElementById('type-name').value.length > 10) {
                alert('分类名称不能为空或超过10个字符');
                return;
            }
            $(document).ready(function () {
                $.ajax({
                    type: 'POST',
                    url: '/list/edit/category',
                    data: {
                        id: document.getElementById('type-id').value,
                        name: document.getElementById('type-name').value
                    },
                    success: function (data) {
                        if (data === 1) {
                            alert('修改成功');
                            location.reload();
                        }
                    },
                    error: function () {
                        alert('修改失败');
                        location.reload();
                    }
                });
            });
        }
    }

    function deleteCategory(id) {
        if (confirm("确定删除此分类吗")) {
            $(document).ready(function () {
                $.ajax({
                    type: 'POST',
                    url: '/list/get/category/news?id=' + id,
                    success: function (data) {
                        if (data === 0) {
                            $(document).ready(function () {
                                $.ajax({
                                    type: 'POST',
                                    url: '/list/del/category/' + id,
                                    success: function () {
                                        console.log('删除成功');
                                        location.reload();
                                    },
                                    error: function () {
                                        console.log('删除失败');
                                    }
                                })
                            });
                        } else {
                            alert('该分类下还有新闻，无法删除！');
                        }
                    }
                });
            });
        }
    }
</script>
</body>
</html>